<template>
  <div class="forecast-comp">
    <div class="lives">
      <span class="weather-img">
        <img v-if="setImage(currentLives.weather)" :src="setImage(currentLives.weather)" />
        {{ currentLives.temperature }}℃
      </span>
      <span class="weather-img">
        <i class="iconfont iconfengxiang"></i>
        {{ currentLives.winddirection }}
      </span>
    </div>
    <Histogram
      class="weather-container"
      :options="options">
    </Histogram>
  </div>
</template>

<script>
import Histogram from '@/components/echarts/base';
import sunImage from '@/assets/images/sun.png';
import cloudy from '@/assets/images/cloudy.png';
import overcast from '@/assets/images/overcast.png';
import rain from '@/assets/images/rain.png';
import thunderShower from '@/assets/images/thunder_shower.png';

export default {
  props: {
    forecasts: {
      type: Array,
      default: () => []
    },
    lives: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  computed: {
    currentLives() {
      return this.lives && this.lives[0] || {};
    },
    // 天气图表配置
    options() {
      if (!this.forecasts.length) return {};
      const xAxisData = [];
      const seriesData = [];
      const rich = {
        value: {
          lineHeight: 30,
          align: 'center',
          color: '#fff'
        }
      };
      const casts = this.forecasts[0].casts || [];
      casts.forEach(item => {
        const { date, daytemp, dayweather } = item;
        const richKey = date.replace(/-/g, '');
        xAxisData.push(date);
        seriesData.push(daytemp);
        rich[richKey] = {
          height: 20,
          align: 'center',
          backgroundColor: {
            image: this.setImage(dayweather)
          }
        };
      });
      return {
        title: {
          text: this.$moment().format('yyyy.MM.DD'),
          padding: [10, 0, 0, 10],
          textStyle: { color: '#fff' }
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            color: '#bac4ff',
            formatter: function (value) {
              const newValue = value.replace(/-/g, '');
              return '{' + newValue + '| }\n{value|' + value + '}';
            },
            margin: 0,
            rich
          }
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [{
          data: seriesData,
          type: 'line',
          smooth: true,
          label: { // 显示数值
            normal: {
              show: true,
              position: 'top',
              textStyle: { color: '#fff' }
            }
          },
          areaStyle: { // 改变区域颜色
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(224, 160, 44, .9)'
            }, {
              offset: 1,
              color: 'rgba(224, 160, 44, .1)'
            }])
          },
          itemStyle: {
            normal: {
              color: '#fff', // 改变折线点的颜色
              lineStyle: {
                color: '#ffb630' // 改变折线颜色
              }
            }
          }
        }]
      };
    }
  },
  components: {
    Histogram
  },
  methods: {
    setImage(type) {
      const types = {
        '多云': cloudy,
        '晴': sunImage,
        '阴': overcast,
        '雨': rain,
        '雷阵雨': thunderShower,
      };
      const currentKey = Object.keys(types).find(key => {
        const reg = new RegExp(`${key}`, 'g');
        return reg.test(type);
      });
      return types[currentKey];
    }
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/main";

  .forecast-comp {
    width: 100%;
    height: 100%;
    position: relative;
    .lives {
      width: 150px;
      height: 25px;
      position: absolute;
      right: 5px;
      top: 5px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .weather-img {
        display: flex;
        align-items: center;
        font-size: 14px;
        img {
          width: 20px;
          height: 20px;
          display: inline-block;
          margin-right: 10px;
        }
        i {
          margin-right: 10px;
          font-size: 18px;
        }
      }
    }
  }
</style>
